<!-- 首页完整版 -->

<template>
    <div>
        <div class="hi-main">
            <div class="hi-map">
                <homeMap></homeMap>
            </div>
            <div class="hi-alarm">
                <div class="hi-apam">AP告警信息</div>
                <div class="hi-ad">告警数据</div>
            </div>
        </div>
        <div class="hi-foot">
            <div class="hi-ud">用户数据</div>
            <div class="hi-fn">融合网监</div>
        </div>
    </div>
</template>

<script>

import homeMap from './homeMap'

export default {
    name: 'homeIndex',
    data () {
        return {
            msg: 'Welcome to 完整版'
        }
    },
    components: {
        homeMap
    }
}
</script>

<style lang="less" scoped>
    @import '../../assets/css/base.less';
    @mainPadding: 110px;      // main距离窗口上下边距值
    @hiFootHeight: 190px;       // 底部内容的高度
    @hiFootMarginTop: 10px;     // 底部内容的margin-top值
    @mapMinHeight: 500px;       // 地图最小高度

    .hi-main {
        position: relative;
    }
    .hi-map {
        height: calc(~'100vh -  @{hiFootHeight} - @{mainPadding} - @{hiFootMarginTop}');
        min-height: @mapMinHeight;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        transition: all .2s;
    }
    .hi-alarm {
        position: absolute;
        right: 0;
        top: 0;
        width: 260px;
    }
    .hi-apam {
        position: relative;
        width: 100%;
        height: calc(~'(100vh -  @{hiFootHeight} - @{mainPadding} - @{hiFootMarginTop}) / 2');
        min-height: @mapMinHeight / 2;
        background: #162639;
        border-bottom: 1px solid #48484b;
    }
    .hi-ad {
        height: calc(~'(100vh -  @{hiFootHeight} - @{mainPadding} - @{hiFootMarginTop}) / 2 - 20px');
        min-height: @mapMinHeight / 2 - 20;
        margin-top: 20px;
    }
    .hi-foot {
        position: relative;
        width: 100%;
        height: @hiFootHeight;
        margin-top: 10px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: flex;
    }
</style>